<template>
    <div class="index">
        <div class="loading" v-show="!showMain">
            <!-- <svg class="loader" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" >
                <circle class="internal-circle" cx="60" cy="60" r="30"></circle>
                <circle class="external-circle" cx="60" cy="60" r="50"></circle>
            </svg> -->
            <span class="heartbeat">Loading...</span>
        </div>
        <navigator 
            :color="$route.name === 'page' || $route.name === 'detailPage'? '#555' : '#eaeaea'"
            :shadow="$route.name === 'page' || $route.name === 'detailPage'? true : false"
            :bgColor="$route.name === 'page' || $route.name === 'detailPage'? '#fff' : ''"
            :logo="$route.name === 'page' || $route.name === 'detailPage'? 'xxx' : 'blue'"
            v-show="showMain"
        ></navigator>
        <keep-alive>
            <router-view 
              @scorll="scorllHandle" 
              @picFinish="picFinish" 
              v-show="showMain" 
              @detailPage="showMain = true" 
              @page="showMain = true"
            >
            </router-view>
        </keep-alive>
    </div>
</template>

<script type="text/ecmascript-6">
import Navigator from "@/components/nav.vue";

import {isMobile} from '@/assets/js/mobile.js'

export default {
    data() {
        return {
            showMain: false
        }
    },
    computed: {
        swiper() {
            return this.$refs.mySwiper.swiper;
        }
    },
    components: {
        Navigator,
    },
    mounted() {
        // this._initTimeInterval();
        isMobile()
    },
    methods: {
        scorllHandle(){
            console.log('父scorll')
        },
        picFinish(){
            this.showMain = true;
        }
    }
}
</script>

<style lang="stylus">
.loading {
    text-align center
    padding-top 2%
}
@-webkit-keyframes heartbeat {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
@-moz-keyframes heartbeat {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
@-o-keyframes heartbeat {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}
@keyframes heartbeat {
  0% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  14% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  28% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
  42% {
    -moz-transform: rotate(45deg) scale(1.3);
    -ms-transform: rotate(45deg) scale(1.3);
    -webkit-transform: rotate(45deg) scale(1.3);
    transform: rotate(45deg) scale(1.3);
  }
  70% {
    -moz-transform: rotate(45deg) scale(1);
    -ms-transform: rotate(45deg) scale(1);
    -webkit-transform: rotate(45deg) scale(1);
    transform: rotate(45deg) scale(1);
  }
}

/* Styles for old versions of IE */
.heartbeat {
  font-family: sans-serif;
  font-weight: 100;
}

/* :not(:required) hides this rule from IE9 and below */
.heartbeat:not(:required) {
  -webkit-animation: heartbeat 1300ms ease 0s infinite normal;
  -khtml-animation: heartbeat 1300ms ease 0s infinite normal;
  -moz-animation: heartbeat 1300ms ease 0s infinite normal;
  -ms-animation: heartbeat 1300ms ease 0s infinite normal;
  -o-animation: heartbeat 1300ms ease 0s infinite normal;
  animation: heartbeat 1300ms ease 0s infinite normal;
  display: inline-block;
  position: relative;
  overflow: hidden;
  text-indent: -9999px;
  width: 36px;
  height: 36px;
  -moz-transform: rotate(45deg) scale(1);
  -ms-transform: rotate(45deg) scale(1);
  -webkit-transform: rotate(45deg) scale(1);
  transform: rotate(45deg) scale(1);
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -webkit-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.heartbeat:not(:required):after, .heartbeat:not(:required):before {
  position: absolute;
  content: "";
  background: #e87;
}
.heartbeat:not(:required):before {
  -moz-border-radius-topleft: 12px;
  -webkit-border-top-left-radius: 12px;
  border-top-left-radius: 12px;
  -moz-border-radius-bottomleft: 12px;
  -webkit-border-bottom-left-radius: 12px;
  border-bottom-left-radius: 12px;
  top: 12px;
  left: 0;
  width: 36px;
  height: 24px;
}
.heartbeat:not(:required):after {
  -moz-border-radius-topleft: 12px;
  -webkit-border-top-left-radius: 12px;
  border-top-left-radius: 12px;
  -moz-border-radius-topright: 12px;
  -webkit-border-top-right-radius: 12px;
  border-top-right-radius: 12px;
  top: 0;
  left: 12px;
  width: 24px;
  height: 12px;
}
</style>
